<template>
  <div>
    <q-layout>
      <q-layout-header ref="header">
        <xheader :title="title" show-filter :is-filter="isFilter" @click-filter="popupFilter"></xheader>
      </q-layout-header>
      <q-page-container>
        <xscrollarea :scroll-height="scrollHeight">
          <q-page padding>
            <q-card v-for="(d,index) in data">
              <q-card-title>
                #{{index+1}} 订单编码 ：{{d.code}}
              </q-card-title>
              <q-card-separator/>
              <q-card-main>
                <div class="row" v-for="dd in d.list">
                  <div class="col"><p>{{dd.label}}：</p></div>
                  <div class="col"><p>{{dd.value}}</p></div>
                </div>
              </q-card-main>
              <q-card-separator/>
              <q-card-actions>
                <q-btn label="随工单记录" class="full-width" color="primary" @click="toManuBatchList(d.code)"/>
              </q-card-actions>
            </q-card>
            <div v-show="data.length === 0" style="width: 100%;height: 100%;text-align: center;">
              <q-alert type="info">
                暂无数据
              </q-alert>
            </div>
          </q-page>
        </xscrollarea>
      </q-page-container>
    </q-layout>
    <q-modal v-model="showPopup" position="bottom" @hide="cancel">
      <q-modal-layout>
        <xfilterheader @cancel="cancel" @confirm="search"></xfilterheader>
        <div class="layout-padding">
          <q-input float-label="订单编码" v-model="orderCode" placeholder="模糊查询" clearable/>
          <q-datetime float-label="生产日期" v-model="manuDate" type="date" clearable/>
          <q-select
            v-model="peifang"
            float-label="配方"
            :options="peifangs" clearable
          />
        </div>
      </q-modal-layout>
    </q-modal>
  </div>
</template>

<script>

  import { manu_order_list_map } from '../../js/table-map'
  import Xheader from '../../components/xheader'
  import Xfilterheader from '../../components/xfilterheader'
  import Xscrollarea from '../../components/xscrollarea'

  export default {
    name: 'manu_order_list',
    components: { Xscrollarea, Xfilterheader, Xheader },
    props: {
      title: {}
    },
    computed: {
      isFilter () {
        return this.orderCode !== '' || this.manuDate !== '' || this.peifang !== ''
      }
    },
    mounted () {
      this.scrollHeight = this.$parent.webHeight - this.$refs.header.$el.clientHeight
    },
    data: () => ({
      orderCode: '',
      manuDate: '',
      peifang: '',
      orderCodeBak: '',
      manuDateBak: '',
      peifangBak: '',
      doSearch: false,
      data: [],
      showPopup: false,
      peifangs: [{ label: '1', value: '1' }, { label: '2', value: '2' }, { label: '3', value: '3' }],
      scrollHeight: 0

    }),
    methods: {
      getData () {
        this.axios.post(this.$conf.server + '/manuOrder/list', this.$qs.stringify({
          orderCode: this.orderCode,
          manuDate: this.manuDate,
          peifang: this.peifang
        })).then(res => {
          let dd = res.data.rows
          if (dd) {
            for (let d of dd) {
              let data = {}
              let list = []
              for (let a in d) {
                let value = d[a]
                if (a === 'CODE') {
                  data.code = value
                } else {
                  let key = manu_order_list_map.colMap.get(a)
                  if (key && key !== '') {
                    if (a === 'STATUS') {
                      value = manu_order_list_map.statusMap.get(value)
                    }
                    list.push({ 'label': key, 'value': value })
                  }
                }
              }
              data.list = list
              this.data.push(data)
            }
          }
        })
      },
      popupFilter () {
        this.showPopup = true
        this.doSearch = false
        this.orderCodeBak = this.orderCode
        this.manuDateBak = this.manuDate
        this.peifangBak = this.peifang
      },
      search () {
        this.showPopup = false
        this.doSearch = true
        this.data = []
        this.getData()
      },
      cancel () {
        this.showPopup = false
        if (!this.doSearch) {
          this.orderCode = this.orderCodeBak
          this.manuDate = this.manuDateBak
          this.peifang = this.peifangBak
        }
      },
      toManuBatchList (code) {
        this.$router.push({ name: 'manu_batch_list', query: { code: code } })
      }

    },
    created () {
      this.getData()
    }
  }
</script>

<style scoped>

</style>
